import { type FC, useEffect } from 'react';

import { type DeviceGroup } from '@/api/deviceGroupApi';

/**
 * 设备分组添加/编辑表单组件属性
 */
interface DeviceGroupAddFormProps {
  /** 表单实例 */
  form: FormInstance;
  /** 分组数据 */
  data: DeviceGroup;
  /** 模式：新增或编辑 */
  mode?: 'add' | 'edit';
}

/**
 * 设备分组添加/编辑表单组件
 * 提供分组名称和备注的编辑功能
 */
const DeviceGroupAddForm: FC<DeviceGroupAddFormProps> = props => {
  const { form, data, mode = 'add' } = props;

  /**
   * 当数据变化时，更新表单值
   * 编辑模式下自动填充表单数据
   */
  useEffect(() => {
    if (mode === 'edit' && data) {
      form.setFieldsValue({
        groupName: data.groupName || '',
        remark: data.remark || '',
      });
    } else if (mode === 'add') {
      // 新增模式下重置表单
      form.resetFields();
    }
  }, [form, data, mode]);

  return (
    <ARow gutter={8}>
      <ACol span={24}>
        <AForm.Item
          name="groupName"
          label="分组名称"
          rules={[
            { required: true, message: '请输入分组名称' },
            { max: 50, message: '分组名称不能超过50个字符' },
            {
              pattern: /^[\u4e00-\u9fa5a-zA-Z0-9_\-\s]+$/,
              message: '分组名称只能包含中文、英文、数字、下划线、连字符和空格',
            },
          ]}
        >
          <AInput placeholder="请输入分组名称" allowClear />
        </AForm.Item>
      </ACol>

      <ACol span={24}>
        <AForm.Item
          name="remark"
          label="分组描述"
          rules={[{ max: 200, message: '分组描述不能超过200个字符' }]}
        >
          <AInput.TextArea
            placeholder="请输入分组描述（可选）"
            rows={4}
            showCount
            maxLength={200}
            allowClear
          />
        </AForm.Item>
      </ACol>
    </ARow>
  );
};

export default DeviceGroupAddForm;
